<script setup lang='ts'>
  import { reactive } from 'vue';
  import { numberApi } from '@/api/controller'
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  const $emit = defineEmits(['updateList'])
  interface actionForm {
    title:string,
    user_id:number,
    nickname:string,
    user_uuid:string | number
    dialogFormVisible:boolean,
    diamond_balance:number,
    kk_balance:number,
    wealth_balance:number,
    charm_balance:number,
  }
  const action = reactive({
    dialogFormVisible:false
  })as actionForm
  const form = reactive({
    wallet_id:0,
    charm_to_kk:0,
  })
  const handleSubmit = async()=>{
    const loading = Toastloading()
    await numberApi.setCharmToKk(form.wallet_id, {
      charm_to_kk: form.charm_to_kk
    })
    loading.close()
    ToastSuccess('金币比例修改成功')
    $emit('updateList')
  }
  const openDialog = (query:actionForm)=> {
    const {
      user_id=0,
      nickname='', user_uuid=''
    } = query;
    const loading = Toastloading()
    numberApi.getFinance(user_id).then(res=>{
      const {
        wallet_id=0,
        diamond_balance=0, charm_balance=0,
        kk_balance=0, wealth_balance=0, charm_to_kk=0
      } = res.data;
      Object.assign(form,{
        wallet_id,
        charm_to_kk
      })
      Object.assign(action,{
        nickname,
        user_uuid,
        title:`${nickname}的钱包`,
        dialogFormVisible:true,
        diamond_balance,
        charm_balance,
        kk_balance,
        wealth_balance
      })
      loading.close()
    })
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="10vh"
    class="xm-dialog"
    v-model="action.dialogFormVisible"
    :title="action.title">
    <el-descriptions border>
      <el-descriptions-item label="UUID">{{ action.title }}</el-descriptions-item>
      <el-descriptions-item label="昵称">{{ action.nickname }}</el-descriptions-item>
      <el-descriptions-item label="钻石余额">{{ action.diamond_balance }}</el-descriptions-item>
      <el-descriptions-item label="魅力值余额">{{ action.charm_balance }}</el-descriptions-item>
      <el-descriptions-item label="金币">{{ action.kk_balance }}</el-descriptions-item>
      <el-descriptions-item label="财富值">{{ action.wealth_balance }}</el-descriptions-item>
<!--      <el-descriptions-item label="金币比例">-->
<!--        <el-input v-model="form.charm_to_kk" placeholder="请输入金币比例"></el-input>-->
<!--        <el-button class="xm-ml10" type="primary" @click="handleSubmit()">确 定</el-button>-->
<!--      </el-descriptions-item>-->
    </el-descriptions>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped >
  .xm-dialog{
    .el-input {
        width: calc($inputWidth);
    }
}
</style>
